<template>
  <div class="title-bar">
    <!-- Cookie状态显示区域 -->
    <div class="cookie-status">
      <span :class="cookieStatusClass">{{ cookieStatusText }}</span>
    </div>
    
    <div class="title-bar-drag-region"></div>
    <div class="title-bar-controls">
      <button class="title-bar-button minimize" @click="minimizeWindow">
        <svg width="12" height="12" viewBox="0 0 12 12">
          <path d="M0 6h12v1H0z" fill="currentColor"></path>
        </svg>
      </button>
      <button class="title-bar-button maximize" @click="maximizeWindow" v-if="!isMaximized">
        <svg width="12" height="12" viewBox="0 0 12 12">
          <path d="M1 1v10h10V1H1zm9 9H2V2h8v8z" fill="currentColor"></path>
        </svg>
      </button>
      <button class="title-bar-button unmaximize" @click="maximizeWindow" v-else>
        <svg width="12" height="12" viewBox="0 0 12 12">
          <path d="M2 2v8h8V2H2zm7 7H3V3h6v6z" fill="currentColor"></path>
          <path d="M4 0H2v2H0v2h2v6h8V4h2V2H4V0zm7 9H5V5h6v4z" fill="currentColor"></path>
        </svg>
      </button>
      <button class="title-bar-button close" @click="closeWindow">
        <svg width="12" height="12" viewBox="0 0 12 12">
          <path d="M6 5.293L10.646.646l.708.708L6.707 6l4.647 4.646-.708.708L6 6.707l-4.646 4.647-.708-.708L5.293 6 .646 1.354l.708-.708L6 5.293z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup>
// 重点修复：补充导入 computed！
import { ref, onMounted, computed } from 'vue';

// 原有：窗口状态响应式数据
const isMaximized = ref(false);
// 新增：Cookie状态响应式数据（初始为检测中）
const cookieStatus = ref('checking'); // checking:检测中, valid:有效, invalid:无效

// 新增：根据状态生成显示文本
const cookieStatusText = computed(() => {
  switch (cookieStatus.value) {
    case 'valid': return '✅ Cookie有效';
    case 'invalid': return '❌ Cookie无效';
    default: return '🔍 检测Cookie状态...';
  }
});

// 新增：根据状态生成样式类
const cookieStatusClass = computed(() => {
  switch (cookieStatus.value) {
    case 'valid': return 'status-valid';
    case 'invalid': return 'status-invalid';
    default: return 'status-checking';
  }
});

// 原有：窗口控制方法
const minimizeWindow = () => {
  window.electronAPI.minimize();
};

const maximizeWindow = () => {
  window.electronAPI.maximize();
};

const closeWindow = () => {
  window.electronAPI.close();
};

// 原有：检查窗口是否最大化
const checkMaximized = async () => {
  isMaximized.value = await window.electronAPI.isMaximized();
};

// 新增：获取Cookie状态（调用主进程API）
const checkCookieStatus = async () => {
  try {
    // 调用主进程暴露的API获取Cookie有效性
    const isCookieValid = await window.electronAPI.checkCookieValidity();
    cookieStatus.value = isCookieValid ? 'valid' : 'invalid';
  } catch (err) {
    console.error('获取Cookie状态失败：', err);
    cookieStatus.value = 'invalid';
  }
};

// 原有：监听窗口事件 + 新增：初始化Cookie状态检测
onMounted(() => {
  // 窗口状态监听
  window.electronAPI.onMaximize(() => {
    isMaximized.value = true;
  });
  
  window.electronAPI.onUnmaximize(() => {
    isMaximized.value = false;
  });
  
  // 初始化窗口状态
  checkMaximized();
  
  // 新增：初始化Cookie状态检测
  checkCookieStatus();
  
  // 可选：每30秒重新检测一次（根据需求调整频率）
  setInterval(checkCookieStatus, 30000);
});
</script>

<style scoped>
.title-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: #333;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9999;
  -webkit-app-region: drag; /* 使整个标题栏可拖拽 */
}

/* 新增：Cookie状态样式 */
.cookie-status {
  padding: 0 15px;
  font-size: 12px;
  -webkit-app-region: no-drag; /* 状态区域不可拖拽 */
}

.status-valid {
  color: #4cd964; /* 绿色：有效 */
}

.status-invalid {
  color: #ff3b30; /* 红色：无效 */
}

.status-checking {
  color: #ffcc00; /* 黄色：检测中 */
}

.title-bar-drag-region {
  flex-grow: 1;
  height: 100%;
}

.title-bar-controls {
  display: flex;
  height: 100%;
  -webkit-app-region: no-drag; /* 按钮区域不可拖拽 */
}

.title-bar-button {
  width: 45px;
  height: 100%;
  border: none;
  background: transparent;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.title-bar-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.title-bar-button.close:hover {
  background-color: #e81123;
}
</style>